<template>
    <div class="visit-stats">
      <div class="stats-header">
        <div class="time-select">
          <el-radio-group v-model="timeRange" size="small">
            <el-radio-button label="today">今天</el-radio-button>
            <el-radio-button label="week">本周</el-radio-button>
            <el-radio-button label="month">本月</el-radio-button>
            <el-radio-button label="year">本年</el-radio-button>
          </el-radio-group>
        </div>
      </div>
  
      <div class="stats-content">
        <div class="title">访问数量</div>
        <div class="chart-container" ref="chartContainer"></div>
      </div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts'
  
  export default {
    name: 'VisitStats',
    data() {
      return {
        chart: null,
        timeRange: 'today',
        visitData: []
      }
    },
    mounted() {
      this.initChart()
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$refs.chartContainer)
        const option = {
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0, 0, 0, 0.7)',
            padding: [8, 12],
            formatter: (params) => {
              return `访问数量：${params[0].value}<br/>单位：百人`
            }
          },
          grid: {
            top: '5%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.getTimeData(),
            axisLine: {
              lineStyle: {
                color: '#E5E7EB'
              }
            },
            axisLabel: {
              color: '#6B7280'
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#E5E7EB'
              }
            },
            axisLabel: {
              color: '#6B7280'
            }
          },
          series: [{
            data: [0.3, 0.32, 0.31, 0.34, 0.35, 0.38, 0.35, 0.32, 0.3, 0.25, 0.2, 0.15, 0.2, 0.4, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.95, 0.85, 0.8],
            type: 'line',
            smooth: true,
            symbol: 'none',
            lineStyle: {
              width: 3,
              color: '#8B5CF6'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(139, 92, 246, 0.2)'
                }, {
                  offset: 1,
                  color: 'rgba(139, 92, 246, 0.02)'
                }]
              }
            }
          }]
        }
        this.chart.setOption(option)
      },
      getTimeData() {
        const times = []
        for (let i = 1; i <= 24; i++) {
          times.push(`${i.toString().padStart(2, '0')}:00`)
        }
        return times
      }
    },
    beforeDestroy() {
      this.chart && this.chart.dispose()
    }
  }
  </script>
  
  <style scoped>
  .visit-stats {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
  }
  
  .stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }
  .stats-content {
    background: #fff;
    border-radius: 8px;
  }
  
  .title {
    font-size: 16px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 20px;
  }
  
  .chart-container {
    width: 100%;
    height: 450px;
  }
  
  :deep(.el-radio-button__inner) {
    background: #F3F4F6;
    border: none;
    color: #6B7280;
  }
  
  :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
    background: #8B5CF6;
    color: white;
    box-shadow: none;
  }
  </style>